<template>
  <div class="myCard" :style="{ borderRadius: radius ? '6px' : 0 }">
    <i class="iconfont" :class="icon" :style="{ color: color }"></i>
    <div>
      <span>{{ text }}</span>
      <span class="num">{{ num | toThousands }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "暂无",
    },
    num: {
      type: [String, Number],
      default: 0,
    },
    icon: {
      type: String,
      default: "icon-order-manage",
    },
    color: {
      type: String,
      default: "aqua",
    },
    radius: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="less" scoped>
.myCard {
  width: 300px;
  height: 120px;
  background-color: #fff;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  div {
    display: flex;
    flex-direction: column;
    .num {
      margin-top: 10px;
    }
  }
  i {
    font-size: 75px;
  }
}
</style>